<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>CSS: Star Rating Redux</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link href="star_rating.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
	<h1>CSS: Star Rating Redux</h1>		
	<ul class="star-rating">
		<li class="current-rating" style="width:60%;">Currently 3/5 Stars.</li>
		<li><a href="#" title="1 star out of 5" class="one-star">1</a></li>
		<li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li>
		<li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li>
		<li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li>
		<li><a href="#" title="5 stars out of 5" class="five-stars">5</a></li>
	</ul>
	
	<h1>CSS: Star Rating Redux inline</h1>		
	Rate this: 
	<span class="inline-rating">
	<ul class="star-rating small-star">
		<li class="current-rating" style="width:30%;">Currently 1.5/5 Stars.</li>
		<li><a href="#" title="1 star out of 5" class="one-star">1</a></li>
		<li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li>
		<li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li>
		<li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li>
		<li><a href="#" title="5 stars out of 5" class="five-stars">5</a></li>
	</ul></span>
	And This:
	<span class="inline-rating">
	<ul class="star-rating small-star">
		<li class="current-rating" style="width:80%;">Currently 4/5 Stars.</li>
		<li><a href="#" title="1 star out of 5" class="one-star">1</a></li>
		<li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li>
		<li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li>
		<li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li>
		<li><a href="#" title="5 stars out of 5" class="five-stars">5</a></li>
	</ul>		
	</span>
	<h1>Let's make it smaller</h1>
	
	<ul class="star-rating small-star">
		<li class="current-rating" style="width:50%">Currently 2.5/5 Stars.</li>
		<li><a href="#" title="1 star out of 5" class="one-star">1</a></li>
		<li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li>
		<li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li>
		<li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li>
		<li><a href="#" title="5 stars out of 5" class="five-stars">5</a></li>
	</ul>		
	</body>
</html>